<template>
	<view>
		 <uni-nav-bar statusBar="true"
		 :fixed="true" :border="false" 
		 backgroundColor="#eff3f7">
		 	<view class="index-top-nav-title" slot="middle">
		 		<view class="leftIcon" @tap.stop="back">
		 			<i class="icon iconfont icon-arrow-left"></i>
		 		</view>
		 		<view class="index-top-nav-title-content">
		 			<!-- {{i18n.orderDetails}} -->
					{{curObj.title}}
		 		</view>
		 		<view class="rightIcon">
		 		</view>
		 	</view> 
		 </uni-nav-bar>
		<view class="content">
			<view class="detail-title">
				<view class="detail-title-top">
					<text>{{i18n.day_return}}</text>
					<view>{{curObj.day_sy}}</view>
				</view>
				<view class="detail-title-bottom">
					<view class="detail-title-bottom-item">
						<view>{{curObj.total}}</view>
						<text>{{i18n.ProducedCoins}} (Block)</text>
					</view>  
					<view class="detail-title-bottom-item">
						<view>{{i18n.theTerm}}</view>
						<text>{{curObj.day}}{{i18n.day}}</text>
					</view>
					<view class="detail-title-bottom-item">
						<view>{{i18n.Repayment_of_principal_and_interest_due}}</view>
						<text>{{curObj.num}} USDT</text>
					</view>
				</view>
			</view>
			
			<view class="Service-cycle">
				<view class="Service-cycle-title">{{i18n.Service_cycle}}</view>
				<template v-if="curObj.status==1">
					<view class="Service-cycle-list">
						<view class="Service-cycle-list-item">
							<text>{{i18n.Scheduled_investment}}</text>
							<view class="Service-cycle-list-item-box">
								{{i18n.Match_period}}
							</view>
						</view>
						<view class="Service-cycle-list-item">
							<text>{{i18n.Start_interest_calculation}}</text>
							<view class="Service-cycle-list-item-box">
								{{i18n.Lock_in_period}}
							</view>
						</view>
						<view class="Service-cycle-list-item">
							<view class="Service-cycle-list-items">
								<text>{{curObj.day}}{{i18n.day}}</text>
								<text>{{i18n.Exit_when_due}}</text>
							</view>
							<view class="Service-cycle-list-item-box exit-box" hover-class="active" @tap.top="exitDing">
								{{i18n.quick_exit}}
							</view>
						</view>
					</view>
				</template>
				<template v-if="curObj.status==2">
					<view class="Service-cycle-list">
						<view class="Service-cycle-list-item inJon">
							<view class="Service-cycle-list-items">
								<text>{{i18n.CurrentInvestment}}</text>
								<text>{{i18n.Start_interest_calculation}}</text>
							</view>
							<view class="Service-cycle-list-item-box">
								{{i18n.Settlement_period}}
								<text>{{i18n.Settlement_period_log}}</text>
							</view>
						</view>
						<view class="Service-cycle-list-item inJon">
							<view class="Service-cycle-list-items">
								<text>{{curObj.day}}{{i18n.day}}</text>
								<text>{{i18n.Exit_when_due}}</text>
							</view>
							<view class="Service-cycle-list-item-box">
								{{i18n.quick_exit}}
							</view>
						</view>
					</view>
				</template>
				
			</view>
			
			
			<view class="detail-item">
				<view class="detail-item-title">
					{{i18n.orderInformation}} <uni-icon type=""></uni-icon>
				</view>
				<view class="detail-item-item">
					<view class="item">
						<view>{{i18n.OrderType}}</view>
						<text>{{curObj.title}}</text>
					</view>
					<view class="item">
						<view>{{i18n.theTerm}}</view>
						<text>{{curObj.day}}{{i18n.day}}</text>
					</view>

					<view class="item">
						<view>{{i18n.ProducedCoins}}</view>
						<text>{{curObj.total}} Block</text>
					</view>
					<view class="item">
						<view>{{i18n.RevenueDays}}</view>
						<text>{{curObj.all_day}}</text>
					</view>
					<view class="item">
						<view>{{i18n.buy_mon}}</view>
						<text>{{curObj.num}} USDT</text>
					</view>
					<view class="item">
						<view>{{i18n.buy_time}}</view>
						<text>{{curObj.time}}</text>
					</view>
				<!-- 	<view class="item">
						<view>矿池分红</view>
						<text>2.86%</text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="progress-bar" v-if="curObj.status!=0">
			{{i18n.Settlement_period_log02}}
		</view>
		<!-- <view class="over-btn" @tap.stop="showPopver" v-if="curObj.status">
			{{i18n.stopFund}}
		</view> -->
		<view class="popver" v-if="popoverShow" @tap.stop="popoverShow=!popoverShow;paypwd=''">
			<view class="popver-content"  @tap.stop="''">
				<view class="iconfont icon-cha" @tap.stop="popoverShow=!popoverShow;paypwd=''"></view>
				<view class="conten">
					<text>{{i18n.paypwds}}</text>
					<input type="text" password value=""  :placeholder="i18n.p_enter_paddword" maxlength="6" v-model="paypwd"/>
					<view class="submit-btn" @tap.stop="over" hover-class="active">
						{{i18n.stop}}
					</view>
				</view>
				
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from '../../components/uni-icon/uni-icon.vue';
	import Load from '../../components/common/load.vue';
	import Toast from '@/components/toast/toast.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,
			uniIcon,
			Load,
			Toast
		},
		data() {
			return {
				popoverShow:false,
				showLoad: false,
				curObj:{},
				paypwd:'',
				isCheck:false
			}
		},
		onLoad(e){
			this.curObj = JSON.parse(e.item)
			
			// console.log(JSON.parse(e.item));
		},
		methods:{
			exitDing(){
				
				if(this.isCheck) return;
				let _this = this
				uni.showModal({
				    title: _this.i18n.messgae,
				    content: _this.getLang==1?'退本会扣除收益及手续费':'The refund will deduct the income and handling fees',
				    success: function (res) {
				        if (res.confirm) {
							// console.log('1111');
							
							_this.showPopver();
				        } else if (res.cancel) {
							// mssage=null
				            // console.log('用户点击取消');
				        }
				    }
				});
				
			},
			showPopver(){
				this.popoverShow = !this.popoverShow
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			over(){
				if(this.paypwd==''&&!this.paypwd){
					showToast(this.i18n.p_enter_paddword)
					return
				}
				if(this.isCheck) return;
				this.isCheck = true;
				let url = this.getRequestUrl + '/api/shop/over'
				let data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					shopid: this.curObj.id,
					paypwd: this.paypwd
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					this.showLoad = false;
					this.isCheck = false;
					if(res.data.code){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}else{
						this.paypwd = ''
						this.showPopver();
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		background: linear-gradient(to right,#0d62ea,#309ff9);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftIcon{
			width: 80upx;
		}
		.rightIcon{
			width: 80upx;
		}
		.index-top-nav-title-content{
			flex: 1;
		}
	}
	.popver{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.65);
		z-index: 9;
		.popver-content{
			padding: 60upx 30upx;
			position: relative;
			background-color: #FFFFFF;
			width: 540upx;
			margin: 0 auto;
			border-radius: 16upx;
			margin-top:60%;
			transform: translateY(-50%);
			.icon-cha{
				position: absolute;
				color: #B9B9B9;
				right: 20upx;
				top: 20upx;
			}
			.conten{
				text{
					font-size: 24upx;
					color:#535353 ;
				}
				input{
					line-height: 80upx;
					height: 80upx;
					padding-left: 20upx;
					border-bottom: 1upx solid #d5d5d5;
				}
				.submit-btn{
					width: 250upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					background-color: #2c98f7;
					color: #FFFFFF;
					border-radius: 10upx;
					margin: 0 auto;
					margin-top: 50upx;
					font-size: 30upx;
					&.active{
						background-color: #e5e9f1;
						color: #393939;
					}
				}
			}
		}
	}
	.progress-bar{
		margin: 60upx 26upx;
		line-height: 46upx;
		height: 46upx;
		font-size: 23upx;
		text-align: center;
		background: linear-gradient(to right,#ffffff,#1673fe);
	}
	.content{
		.detail-title{
			font-size:24upx;
			color: #1f1f1f;
			line-height: 91upx;
			padding:19upx 34upx 11upx 29upx;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			// border-bottom: 20upx solid #efefef;
			background: linear-gradient(to right,#0d62ea,#309ff9);
			.detail-title-top{
				text-align: center;
				padding-bottom: 48upx;
				border-bottom: 1upx solid #49b0f9;
				text{
					line-height: 60upx;
					font-size: 24upx;
					color: #82bcfb;
				}
				view{
					line-height: 60upx;
					font-size: 60upx;
					font-weight: bold;
					line-height: 60upx;
					color: #ffffff;
				}
			}
			.detail-title-bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.detail-title-bottom-item{
					flex:1;
					text-align: center;
					&:first-of-type{
						position: relative;
						&::after{
							content: "";
							height: 70upx;
							width: 1upx;
							background-color: #49b0f9;
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
					&:last-of-type{
						position: relative;
						&::after{
							content: "";
							height: 70upx;
							width: 1upx;
							background-color: #49b0f9;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
					text{
						color: #76b9fc;
						font-size: 24upx;
						display: block;
						line-height: 24upx;
						padding-bottom: 30upx;
					}
					view{
						font-size: 30upx;
						line-height: 80upx;
						color: #ffffff;
					}
				}
			}
			// image{
			// 	flex-shrink: 0;
			// 	width: 90upx;
			// 	height: 91upx;
			// }
		}
		.Service-cycle{
			border-top: 20upx solid #f3f5f9;
			border-bottom: 20upx solid #f3f5f9;
			padding-bottom: 64upx;
			.Service-cycle-title{
				color: #282828;
				font-size: 28upx;
				font-weight: bold;
				line-height: 60upx;
				padding:30upx 0 30upx 30upx;
			} 
			.Service-cycle-list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30upx;
				.Service-cycle-list-item{
					font-size: 23upx;
					text{
						padding-bottom: 16upx;
						line-height: 24upx;
						display: block;
					}
					
					.inJon{
						text{
							padding-bottom: 0;
						}
						&.Service-cycle-list-items{
							padding-bottom: 16upx;
						}
					}
					&:first-of-type{
						width: 108upx;
						margin-right: 10upx;
						.Service-cycle-list-item-box{
							height: 80upx;
							text-align: center;
							background-color: #E5E9F1;
							border-top: #1D7EFF 8upx solid;
							line-height: 80upx;
						}
						&.inJon{
							flex:1;
							.Service-cycle-list-items{
								display: flex;
								justify-content: space-between;
								align-items: center;
								line-height: 24upx;
							}
							.Service-cycle-list-item-box{
								padding-left: 15upx;
								text-align: left;
								font-size: 25upx;
								text{
									font-size: 18upx;
									padding-bottom: 0;
								}
							}
							.Service-cycle-list-item-box{
								line-height: 36upx;
							}
						}
					}
					&:nth-child(2){
						width: 108upx;
						margin-right: 10upx;
						.Service-cycle-list-item-box{
							background-color: #E5E9F1;
							line-height: 80upx;
							text-align: center;
							border-top: #7DA9E9 8upx solid; 
						}
					}
					&:last-of-type{
						flex:1;
						.Service-cycle-list-item-box{
							background-color: #E5E9F1;
							line-height: 80upx;
							text-align: center;
							border-top: #EE1600 8upx solid;
							&.exit-box{
								background-color: #E5E9F1;
								color: #393939;
								&.active{
									background-color: #ee1600;
									color: #FFFFFF;
								}
							}
						}
						.Service-cycle-list-items{
							display: flex;
							justify-content: space-between;
							align-items: center;
							line-height: 24upx;
						}
					}
				}
			}
		}
		.detail-item{
			// border-bottom: 20upx solid #efefef;
			.detail-item-title{
				font-size:26upx;
				color: #000000;
				// position: relative;
				padding-left: 26upx;
				font-weight: bold;
				line-height: 106upx;
				border-bottom: 1upx solid #d7d6db;
			}
			.detail-num{
				flex: flex;
				align-items: center;
				font-size:45upx;
				color: #2f2f2f;
				padding:20upx 0 20upx  26upx;
				text{
					margin-left: 10upx;
					font-size: 24upx;
					font-weight: bold;
				}
			}
			.detail-item-item{
				.item{
					padding:0 0 0 26upx;
					display: flex;
					align-items: center;
					border-bottom: 1upx solid #d7d6db;
					line-height: 106upx;
					view{
						width: 98upx;
						font-size:24upx ;
						color: #5E5E5E;
						margin-right: 30upx;
					}
					text{
						flex: 1;
						font-size:28upx;
						color: #2E2E2E;
					}
				}
			}
		}
	}
	.over-btn{
		width: 350upx;
		height: 80upx;
		line-height: 80upx;
		background-color: #FF242F;
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		margin:0 auto;
		border-radius: 16upx;
	}
</style>
